<template>
  <view class="detail">
    <nav-bar title="需水信息" leftArrow></nav-bar>
    <view class="universal-head">
      <view class="universal-head-title">村头</view>
      <view class="universal-status" :class="detail.status.value === '4' ? 'universal-status-success' : 'universal-status-warning'">{{detail.status.label}}</view>
    </view>
    <view class="universal-detail">
      <view class="universal-detail-cont">
        <!-- <view class="universal-detail-item">
          <view class="universal-detail-item-title">上报编码：</view>
          <van-text-ellipsis class="universal-detail-item-cont" :content="detail.reportNo || '-'" />
        </view> -->
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">需水区域(灌片)：</view>
          <view class="universal-detail-item-cont">{{ detail.projectItemName }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">具体需水区域：</view>
          <view class="universal-detail-item-cont">{{ detail.demandArea }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">需水面积：</view>
          <view class="universal-detail-item-cont">{{ detail.areaDemand }}亩</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">预计需水量：</view>
          <view class="universal-detail-item-cont">{{ detail.waterDemand }}m³</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">上报人：</view>
          <view class="universal-detail-item-cont">{{ detail.createName }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">上报时间：</view>
          <view class="universal-detail-item-cont">{{ detail.reportTime }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">附件照片：</view>
          <view class="universal-detail-list">
            <image v-for="(image, index) in detail.picUrl" :src="image.url" mode="aspectFit" @click="handleImagePreview(image.url, index)" class="universal-detail-list-image"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-bottom">来源：{{ detail.reportSource.label || '-' }}</view>
  </view>
</template>

<script setup>
  import { showImagePreview } from 'vant';
  import { ref } from 'vue';
  import { apiWaterNeedRecordDetail } from '@/api/waterNeed';

  const path = defineProps({
    id: String
  })
  const detail = ref({});
  const detailState = ref({});
  

  const getWaterNeedDetail = () => {
    apiWaterNeedRecordDetail({
      'value': Number(path.id)
    }).then(res => {
      detail.value = res;
      detailState.value = res.status || {}
    })
  };
  getWaterNeedDetail();

  const handleImagePreview = (imageUrl, index) => {
    showImagePreview({
      images: [imageUrl],
      startPosition: index,
      closeOnClickImage: false,
    })
  }
</script>

<style lang="scss" scoped>
@import '@/assets/universal-page.scss';
@import '@/assets/universal-detail.scss';

.detail {
  .universal-detail {
    .universal-detail-item {
      min-width: 90%;
    }
  }
  &-bottom {
    padding: 0 20rpx;
    text-align: right;
    color: #999;
    font-size: 22rpx;
    line-height: 1;
  }
}
</style>